<ng-container>
  <ng-container *ngIf="lvShowTrigger">
    <!-- 展示区 -->
    <div
      lv-internal-select-trigger
      [lvDisabled]="lvDisabled"
      [lvLoading]="lvLoading"
      [lvPlaceholder]="lvPlaceholder"
      [value]="multiple ? value : value[0]"
      [lvMode]="lvMode"
      [lvShowClear]="lvShowClear"
      [lvMaxTagCount]="lvMaxTagCount"
      [lvMaxTagRow]="lvMaxTagRow"
      [lvSize]="lvSize"
      [selectOpen]="open"
      [customTrigger]="customTrigger ? customTriggerTpl : null"
      (removeChange)="removeSelectedItem($event)"
      (clearChange)="clearSelection($event)"
      (onFoldSelectionChange)="updatePosition()"
    ></div>
    <!-- 自定义选中样式 -->
    <ng-template #customTriggerTpl>
      <ng-content select="lv-cascader-trigger"></ng-content>
    </ng-template>
  </ng-container>

  <ng-content></ng-content>
</ng-container>

<!--下拉面板-->
<ng-template #cascaderPanelTpl>
  <div
    class="lv-cascader-panel"
    [class.lv-cascader-panel-large]="lvSize === 'large'"
    [@showItem]="animationState"
    (@showItem.done)="onAnimationDone($event)"
  >
    <!-- header -->
    <div class="lv-cascader-panel-header">
      <!-- custom -->
      <ng-content select="lv-cascader-header"></ng-content>

      <!-- TODO:search -->
      <div *ngIf="lvShowFilter" class="lv-cascader-panel-search">
        <lv-search
          [lvType]="'inner'"
          [lvFocus]="lvFilterFocus"
          [(ngModel)]="filterValue"
          (ngModelChange)="searchChange($event)"
        ></lv-search>
      </div>
    </div>

    <!-- content -->
    <div
      class="lv-cascader-panel-content"
      [class.lv-cascader-panel-has-options]="renderOptions?.length && renderOptions[0]?.length"
      [@.disabled]="!showSubItem"
    >
      <!-- 数据列表 -->
      <!-- TODO: 虚拟滚动 -->
      <ng-container *ngIf="renderOptions?.length && renderOptions[0]?.length; else noRenderOptions">
        <ng-container *ngFor="let options of renderOptions; let i = index; trackBy: lvTrackBy">
          <!-- 打开的时候，子菜单才需要位移动效 -->
          <div class="lv-cascader-option-list" @showSubItem>
            <ng-container *ngTemplateOutlet="contentTpl; context: { $implicit: options, index: i }"></ng-container>
          </div>
        </ng-container>
      </ng-container>
      <!-- 数据为空 -->
      <ng-template #noRenderOptions>
        <div class="lv-cascader-no-data" (click)="stopPropagation($event)">
          <lv-empty [lvImage]="null"></lv-empty>
        </div>
      </ng-template>
    </div>

    <!-- footer -->
    <div class="lv-cascader-panel-footer">
      <ng-content select="lv-cascader-footer"></ng-content>
    </div>
  </div>
</ng-template>

<!-- 内容区 option template -->
<ng-template #contentTpl let-options let-index="index">
  <ng-container *ngIf="options?.length">
    <lv-cascader-option
      *ngFor="let item of options"
      [lvData]="item"
      [lvIndex]="index"
      [lvActive]="item?.active"
      [lvTrigger]="lvTrigger"
      [lvChangeOnSelect]="lvChangeOnSelect"
      [lvItemTemplate]="lvOptionRender"
    ></lv-cascader-option>
  </ng-container>
</ng-template>
